<template>
    <el-menu class="indexLeft-page" background-color="#38424D" text-color="#747B82" @select="select"
        :default-active="showMenu"
    >
        <template v-for="item in menus" v-if="item.type==1">
            <template v-if="item.subMenus">
                <el-submenu :index="item.id.toString()">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span :id="item.id">{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="subItem,i in item.subMenus" v-if="subItem.type==1" :key="i"
                    :index="subItem.url+'_'+subItem.name" :id="subItem.id">
                        {{ subItem.name }}
                    </el-menu-item>
                </el-submenu>
            </template>
            <template v-else>
                <el-menu-item :index="item.id.toString()">
                    <i :class="item.icon"></i>
                    <span :id="item.id">{{ item.name }}</span>
                </el-menu-item>
            </template>
        </template>
    </el-menu>
</template>
<script>
export default {
  props: ["showMenu"],
  data() {
    return {
      menus: []
    };
  },
  methods: {
    select(e) {
      let that = this;
      that.$emit("clickMenu", {
        tabOptions: e
      });
    }
  },
  created(){
          let that = this;
          let menusList = that.localData('get', 'login_user').permissions  || [];
          menusList.map(function(item){
            let subMenus = [];
            item.childs.forEach(function(itemChild,index){
              subMenus.push({
                "id":itemChild.id,
                "name":itemChild.name,
                "type":1,
                "url":itemChild.url,
                "icon":"",
                "sort":1,
                "parentId":null,
                "subMenus":[

                ]
              })
            })
            that.menus.push({
              "id":item.id,
              "name":item.name,
              "type":1,
              "url":item.url,
              "icon":item.iconClass,
              "sort":1,
              "parentId":null,
              "subMenus":subMenus
            })
          })
        }
};
</script>
<style lang="less">
.indexLeft-page {
  border-right: 0;
  min-height: 100%;
  .el-submenu {
    overflow: hidden;
    .el-submenu__title {
      .iconfont {
        position: relative;
        top: -1px;
        margin-right: 5px;
        font-size: 18px;
      }
      .el-submenu__icon-arrow {
        ms-transform: rotate(-90deg);
        transform: rotateZ(-90deg);
        margin-top: -4px;
      }
      &.el-submenu__title:hover{
        background-color: #454F5A !important;
        // color: #747B82 ;
      }
    }
    .el-menu {
      .el-menu-item {
        height: 40px;
        line-height: 40px;
        &.el-menu-item:hover{
        background-color: #454F5A !important;
      }
        &.is-active {
          background-color: #12181F !important;
          position: relative;
          &::after {
            left: 0;
            top: 0;
            position: absolute;
            content: "";
            width: 2px;
            height: 100%;
            background-color: #3387FF;
          }
          &::before {
            right: 0;
            top: 50%;
            margin-top: -5px;
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-right: 5px solid #f6f6f6;
            border-bottom: 5px solid transparent;
          }
        }
      }
    }
    &.is-opened {
      .el-submenu__icon-arrow {
        -ms-transform: rotate(0deg);
        transform: rotateZ(0deg);
      }
    }
    &.is-active {
      .el-submenu__title {
        color: #fff !important;
        * {
          color: #fff;
        }
      }
    }
  }
  .el-menu-item.is-active {
    color:#3387FF;
  }
}
</style>
